<template>
  <view class="detailItem">
    <view class="state" v-if="props.state">{{ props.state }}</view>
    <view class="detailItemName">{{ props.title }}</view>
    <view class="detailItemBox" v-for="(item, idx) in props.list" :key="idx">
      <view class="edit" @click="() => handleEdit(item)" v-if="props.isEdit">
        <image
          class="icon"
          src=""
          mode=""
        ></image>
      </view>
      <view class="left">
        <image class="icon" :src="item.image"></image>
      </view>
      <view class="right">
        <view class="title">{{ item.name }}</view>
        <view class="desc">{{ item.des }}</view>
        <view class="info">
          <view
            class="infoItem"
            :style="x.customStyle"
            v-for="(x, idx) in item.infoList"
            :key="idx"
          >
            <view v-if="x.tag" class="tag" :style="Tag_Type[x.tag].style">
              {{ Tag_Type[x.tag].name }}
            </view>
            <view>
              {{ x.name }}
            </view>
            <view>
              {{ x.value }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  state: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default() {
      return [];
    },
  },
});
const Tag_Type = {
  order: {
    style: "background-color: #04C27E",
    name: "订",
  },
  send: {
    style: "background-color: #E86660",
    name: "发",
  },
  send_Red: {
    style: "background-color: #FD4D00 ",
    name: "发",
  },
  accept: {
    style: "background-color: #FD4D00 ",
    name: "收",
  },
  return: {
    style: "background-color: #8F5231",
    name: "退",
  },
  out: {
    style: "background-color: #04C27E",
    name: "出",
  },
  in: {
    style: "background-color: #04C27E",
    name: "入",
  },
  pan: {
    style: "background-color: #04C27E",
    name: "盘",
  },
};
const emits = defineEmits(["edit"]);
const handleEdit = (item) => {
  emits("edit", item);
};
</script>

<style lang="scss">
.detailItem {
  background-color: #fff;
  position: relative;
  padding: 16px 18px 0;
  overflow: hidden;

  .state {
    position: absolute;
    right: -23px;
    top: 8px;
    height: 20px;
    width: 80px;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    color: #fff;
    background-color: #ff6105;
    transform: rotate(45deg);
  }

  .detailItemName {
    margin-bottom: 8px;
    font-size: 14px;
    color: #434343;
    line-height: 22px;
  }

  .detailItemBox {
    width: 100%;
    display: flex;
    padding-top: 12px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    .edit {
      position: absolute;
      right: 11px;
      top: 35px;
      height: 14px;
      width: 14px;

      .icon {
        display: block;
        width: 14px;
        height: 14px;
      }
    }

    .left {
      margin-right: 21px;

      .icon {
        display: block;
        width: 50px;
        height: 50px;
      }
    }

    .right {
      flex: 1;
      padding-bottom: 5px;

      .title {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        margin-bottom: 4px;
      }

      .desc {
        font-size: 10px;
        color: #a0a0a0;
        line-height: 14px;
        margin-bottom: 7px;
      }

      .info {
        display: flex;
        flex-wrap: wrap;

        .infoItem {
          width: 50%;
          font-size: 10px;
          color: #333333;
          line-height: 14px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;

          &:nth-child(2n) {
            justify-content: flex-end;
          }

          .tag {
            color: #fff;
            width: 13px;
            height: 13px;
            line-height: 13px;
            font-size: 10px;
            text-align: center;
            margin-right: 8px;
            border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>
